<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
    <title>微课堂 V1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="welcome.html">首页</a>
        <a href="course-list.html">用户管理</a>
        <a>
          <cite>用户列表</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
     <div class="layui-form layui-col-md12 x-so">
          <input type="text" name="content" id="content"  placeholder="昵称" autocomplete="off" class="layui-input">
          <button class="layui-btn" lay-filter="content" id="searchList"><i class="layui-icon">&#xe615;</i></button>
       </div>
    
	<!-- <div class="layui-btn-group userTableTable">
	  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
	  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
	  <button class="layui-btn" data-type="isAll">验证是否全选</button>
	</div> -->
 
	<table class="layui-table" lay-data="{width: 918, height:500, url:'/wechat/user/list_', page:true, id:'listTable'}" lay-filter="userTable">
	  <thead>
	    <tr>
	     <!--  <th lay-data="{type:'checkbox', fixed: 'left'}"></th> -->
	      <th lay-data="{field:'nickName', width:140, sort: true, fixed: true, align:'center'}">昵称</th>
	      <th lay-data="{field:'gender', width:80, sort: true, align:'center',templet: '#bargenderTable'}">性别</th>
	      <th lay-data="{field:'city', width:140, align:'center'}">所在城市</th>
	      <th lay-data="{field:'province', width:140, align:'center'}">所在省会</th>
	      <th lay-data="{field:'avatarUrl', width:140, align:'center', templet : '#barImgTable'}">头像</th>
	      <th lay-data="{field:'isManager', width:140, sort: true, align:'center', templet : '#barManagerTable'}">是否管理员</th>
	      <th lay-data="{fixed: 'right', width:120, align:'center', toolbar: '#baruserTable'}">操作</th>
	    </tr>
	  </thead>
	</table>
    </div>
	<script type="text/html" id="baruserTable">
 		 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="bargenderTable">
 		{{#  if(d.gender == 1){ }}
   			<span>男</span>
 		 {{#  } else { }}
   		 女
  		{{#  } }}
	</script>
	<script type="text/html" id="barImgTable">
 		 <img style="width:30px;heigth:30px;" src="{{d.avatarUrl}}"/>
	</script>
	<script type="text/html" id="barManagerTable">
		<input type="checkbox" name="isManager" value="{{d.openId}}" title="管理员" lay-filter="setManager" {{ d.isManager == 2 ? 'checked' : '' }}>
	</script>
	
	               
	<script>
	layui.use('table', function(){
	  var table = layui.table;
	  form = layui.form;
	  //监听表格复选框选择
	  form.on('checkbox(setManager)', function(obj){
	    console.log(this.value + ' ' + this.name + '：'+ obj.elem.checked);
	   $.ajax({
		   url:'/wechat/user/edit',
		   data:{
			   openId: this.value,
			   isManager : obj.elem.checked?2:1
		   }
	   });
	    
	  });
	  //监听工具条
	  table.on('tool(userTable)', function(obj){
	    var data = obj.data;
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	    	  	$.ajax({
	    	  		url : '/wechat/user/delete',
	    	  		method : 'get',
	    	  		data : {
	    	  			openId : data.openId
	    	  		},
	    	  		success: function(data){
			        obj.del();
			        layer.close(index);
			        layer.msg('删除成功');
	    	  		},
	    	  		fail : function(){
	    	  			layer.msg('删除失败');
	    	  		}
	    	  	});
	      });
	    }
	  });
	  
	  $("#searchList").on('click', function(){
		  table.reload('listTable', {
			  url: '/wechat/user/list_',
			  where: {
				  content : $("#content").val()
			  } //设定异步数据接口的额外参数
		  });
	  });
	  
	});
	 
	</script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>
  
</html>